參考出處 JS 30

參考出處 Alex 宅幹嘛

JS 30 DAY 24 sticky Navbar

因為主要要學習 JS 所以 HTML 的部分可以直接到 code 內去看

學習目標：

如何使用計算座標

思考 path

1. 什麼時候觸發 ( 監聽捲軸事件)

下圖可以看出視窗不動的時候， scrollY 是捲軸的長度

2. 判斷

我們這裡要判斷的是，scrollY 不可以大於 offsetTop 的高度，把這個高度設為固定值。

3. 增加 css class 把 navbar 固定住。

let nav = document.querySelector('#main')

function scrollHandler(){
    if(window.scrollY >= nav.offsetTop){
     document.body.classList.add('fixedMenu');
    }else{
    document.body.classList.remove('fixedMenu');
 }
}

window.addEventListener('scroll',scrollHandler);

基本上，上面的 code 已經做到 fixed navbar，但是上面的作法會讓 fixedMenu 定在最上面，不會回復到原本的位置，所以我們要做一點調整。

把 nav.offsetTop 設成變數，
再增加一個 resize 的方法，讓我們可以重設他的 nav 高度。

 let nav = document.querySelector('#main')
 let navPosition = nav.offsetTop
 
 function scrollHandler(){
    if(window.scrollY >= navPosition){
     document.body.classList.add('fixedMenu');
    }else{
    document.body.classList.remove('fixedMenu');
 }
}

window.addEventListener('scroll',scrollHandler);
window.addEventListener('resize', function(){
    navPosition = nav.offsetTop
});

以上，明天見。